<template>
  <div class="applyCard">
    <van-nav-bar title="信用卡申请" />
    <div class="search">
      <van-search
        v-model="searchValue"
        shape="round"
        show-action
        background="#fff"
        placeholder="请输入"
      >
        <template #action>
          <van-icon class="filter" name="filter-o" @click="cardShow = true" />
        </template>
      </van-search>
    </div>
    <div class="types">
      <span
        v-for="item in types"
        :key="item"
        @click="handleSelectType(item)"
        :class="item === selectType && 'selected'"
      >{{ item }}</span>
    </div>
    <div class="cards">
      <div :class="{ card: true, card2: obj.urls }" v-for="(obj, index) in cards" :key="index">
        <p>
          <span>
            {{ obj.title }}
            <van-icon name="arrow" class="arrow-icon" />
          </span>
        </p>
        <div class="card-content">
          <img v-if="obj.url" :src="obj.url" alt />
          <img v-if="obj.urls" :src="obj.urls[0]" alt />
          <div>
            <p class="tip" v-for="item in obj.tips" :key="item">
              <img src="./images/xin.png" alt />
              <span>{{ item }}</span>
            </p>
          </div>
        </div>
        <div class="apply" @click="$router.push({ name: 'cardDetail', query: { id: index } })">立即申请</div>
        <div class="link" v-if="obj.urls">
          <template v-for="(url, index) in obj.urls">
            <img v-if="index !== 0" :key="index" :src="url" alt />
          </template>
        </div>
      </div>
    </div>
    <!-- 卡片筛选 -->
    <van-action-sheet v-model:show="cardShow" title="卡片筛选">
      <div class="card-filter-content">
        <div class="card-type" v-for="(obj, index) in cardTypes" :key="index">
          <p class="card-type-title">{{ obj.title }}</p>
          <div class="card-type-child">
            <span
              v-for="item in obj.types"
              @click="handleSelectedCard(item)"
              :class="{ 'selected-card': selectedCards.includes(item) }"
              :key="item"
            >{{ item }}</span>
          </div>
        </div>
        <div class="btns">
          <span @click="selectedCards = []">重置</span>
          <span
            :class="selectedCards.length && 'isbtn'"
            @click="cardShow = false"
          >确定({{ selectedCards.length }}张)</span>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
import cards from "./cards.js";
export default {
  name: "applyCard",
  components: {},
  data() {
    return {
      searchValue: "",
      cardShow: false,
      types: [
        "推荐",
        "全部",
        "联名合作",
        "吃喝玩乐",
        "交通出行",
        "乐享购物",
        "经典系列",
        "分期专享"
      ],
      selectType: "推荐",
      cards,
      cardTypes: [
        {
          title: "卡片等级",
          types: ["普卡", "金卡", "白金卡", "钛金卡", "钻石卡"]
        },
        {
          title: "卡片组织",
          types: ["银联", "VISA", "Master", "美国运通"]
        },
        {
          title: "卡片分类",
          types: [
            "推荐",
            "联名合作",
            "吃喝玩乐",
            "交通出行",
            "乐享购物",
            "经典系列",
            "分期专享"
          ]
        }
      ],
      selectedCards: []
    };
  },
  methods: {
    onClickLeft() {
      window.history.go(-1);
    },
    handleSelectType(item) {
      this.selectType = item;
    },
    handleSelectedCard(item) {
      if (this.selectedCards.includes(item)) {
        this.selectedCards = this.selectedCards.filter(itm => itm !== item);
      } else {
        this.selectedCards.push(item);
      }
    }
  }
};
</script>

<style lang="less" scoped>
.applyCard {
  background-color: #edeff7;
  min-height: 100vh;
  padding-bottom: 1px;
}
.filter {
  font-size: 20px;
}
.search {
  ::v-deep .van-search__content--round {
    border: 1px solid #fc985a;
    background-color: white;
  }
}
.types {
  display: flex;
  align-items: center;
  background-color: white;
  border-top: 1px solid rgba(222, 222, 222, 0.3);
  padding: 8px 5px 10px 12px;
  width: 100vw;
  overflow-x: auto;
  box-sizing: border-box;
  scrollbar-width: none;
  -ms-overflow-style: none;
  span {
    padding: 6px 12px;
    background-color: #f2f4fa;
    margin-right: 10px;
    word-break: keep-all;
    border-radius: 26px;
    color: gray;
    font-size: 14px;
  }
  .selected {
    color: #fc670a;
    font-weight: bolder;
    background-color: #fff3eb;
  }
}
.card {
  background-color: white;
  box-sizing: border-box;
  padding: 10px 12px;
  width: 347px;
  height: 160px;
  margin: 10px auto;
  border-radius: 10px;
  position: relative;
  p {
    margin: 0;
    padding: 0;
  }
  & > p {
    margin: 10px 0 15px;
    span {
      font-weight: bolder;
      font-size: 16px;
    }
    .arrow-icon {
      color: gray;
      margin-left: 3px;
      font-size: 16px;
    }
  }
  .card-content {
    display: flex;
    align-items: center;
    img {
      padding: 0;
      margin: 0;
      margin-right: 15px;
      width: 122px;
      height: 77px;
    }
  }
  .tip {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    img {
      margin: 1px 8px 0 0;
      width: 12px;
      height: 12px;
    }
    span {
      width: 160px;
      font-size: 12px;
      color: rgb(85, 85, 85);
      font-weight: 400;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .apply {
    background-image: linear-gradient(
      270deg,
      rgb(252, 101, 6) 0%,
      rgb(252, 133, 6) 100%
    );
    border-radius: 15px;
    font-size: 14px;
    color: white;
    height: 30px;
    width: 88px;
    line-height: 30px;
    font-weight: 400;
    text-align: center;
    position: absolute;
    right: 15px;
    top: 120px;
  }
  .link {
    width: 322px;
    height: 50px;
    padding: 6px;
    margin: 30px auto 0;
    box-sizing: border-box;
    background-color: rgb(242, 244, 250);
    border-radius: 6px;
    & > img {
      width: 58px;
      height: 37px;
      margin-right: 7px;
    }
  }
}
.card2 {
  height: 220px;
}
.card-filter-content {
  height: 70vh;
  box-sizing: border-box;
  padding-bottom: 80px;
  overflow-y: scroll;
  .card-type {
    padding: 16px 16px 0 16px;
    box-sizing: border-box;
  }
  .card-type-title {
    font-size: 16px;
    line-height: 19px;
    font-weight: 700;
    padding: 0;
    margin: 0 0 15px 0;
  }
  .card-type-child {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    span {
      margin: 0 8px 8px 0;
      width: 106px;
      text-align: center;
      box-sizing: border-box;
      padding: 8px 0;
      background-color: rgb(239, 239, 239);
      border-radius: 18px;
    }
    .selected-card {
      background-color: #fff3eb;
      color: rgb(252, 101, 6);
    }
  }
  .btns {
    width: 100%;
    height: 68px;
    box-sizing: border-box;
    padding: 0 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: white;
    position: absolute;
    left: 0;
    bottom: 0;
    span {
      width: 95px;
      height: 42px;
      line-height: 42px;
      text-align: center;
      border: 1px solid rgb(252, 101, 6);
      border-radius: 21px;
      color: rgb(252, 101, 6);
      padding: 0 36px;
    }
    span:last-child {
      background-color: #bcbfcc;
      border: none;
      color: white;
    }
    .isbtn {
      background-image: linear-gradient(
        270deg,
        rgb(252, 101, 6) 0%,
        rgb(252, 133, 6) 100%
      );
      color: white;
    }
  }
}
</style>
